<template>
  <div>
    <!--L1部分-->
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div style="display: flex; justify-content: space-between">
            <span>毕业要求(L1)</span>
            <i class="el-icon-circle-plus" style="color: #17B3A3; font-size: 40px" @click="addParent()"></i>
          </div>
        </div>
        <el-table class="tableBox"
                  :data="tableData.filter(data => !searchPara || data.brief.toLowerCase().includes(searchPara.toLowerCase()))"
                  style="width: 100%"
                  @row-click="handleRowClick"
                  highlight-current-row>
          <el-table-column align="center"
                           prop="id"
                           label="编号"
                           width="120">
          </el-table-column>
          <el-table-column align="center"
                           prop="brief"
                           label="名称"
                           width="150">
          </el-table-column>
          <el-table-column
              prop="content"
              label="详细内容">
          </el-table-column>
          <el-table-column align="center" width="250">
            <template slot="header" slot-scope="scope">
              <el-input
                  v-model="searchPara"
                  size="mini"
                  placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEditParent(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteParent(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!--L2部分-->
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div style="display: flex; justify-content: space-between">
            <span>毕业要求(L2)</span>
            <i class="el-icon-circle-plus" style="color: #17B3A3; font-size: 40px" @click="addChild()"></i>
          </div>
        </div>
        <el-table
            :data="tableChildrenData.filter(data => !searchChild || data.content.toLowerCase().includes(searchChild.toLowerCase()))"
            style="width:100%"
            stripe>
          <el-table-column align="center"
                           prop="id"
                           label="序号"
                           width="100">
          </el-table-column>
          <el-table-column align="center"
                           prop="childId"
                           label="编号"
                           width="150">
          </el-table-column>
          <el-table-column
              align="center"
              prop="parentId"
              label="所属L1编号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="content"
              label="详细内容">
          </el-table-column>
          <el-table-column align="center" width="250">
            <template slot="header" slot-scope="scope">
              <el-input
                  v-model="searchChild"
                  size="mini"
                  placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEditChild(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteChild(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!--L1 编辑和添加时显示-->
    <el-dialog title="培养目标L1" :visible.sync="parentFormVisible">
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" :readonly="idReadOnly"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.brief" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="parentFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!--L2 编辑和添加时显示-->
    <el-dialog title="培养目标L2" :visible.sync="childFormVisible">
      <el-form :model="childForm">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="childForm.id" autocomplete="off" :readonly="idReadOnly"></el-input>
        </el-form-item>
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="childForm.childId" autocomplete="off" :readonly="idReadOnly"></el-input>
        </el-form-item>
        <el-form-item label="所属L1编号" :label-width="formLabelWidth">
          <el-input v-model="childForm.parentId" autocomplete="off" :readonly="idReadOnly"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="childForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="childFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GraduateRequire",
  async created() {
    let res = await this.$axios.get('/graduate-require-parent/parent/findAllParent');
    this.tableData = res['data'];
  },
  data() {
    return {
      status: 0,
      tableData: [],
      tableChildrenData: [],
      searchPara: '',
      searchChild: '',
      parentFormVisible: false,
      childFormVisible: false,
      form: {},
      childForm: {},
      formLabelWidth: '120px',
      idReadOnly: false
    }
  },
  methods: {
    /*
    删除L1
    * */
    handleDeleteParent(index, row) {
      this.$confirm('您确定删除该培养目标?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$axios.delete("/graduate-require-parent/parent", {
          params: {id: row.id}
        });
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEditChild(index, row) {
      this.status = 2;
      this.idReadOnly = true;
      this.childForm = this.tableChildrenData[index];
      this.childFormVisible = true;
    },
    handleDeleteChild(index, row) {
      this.$confirm('您确定删除该培养目标?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$axios.delete("/graduate-require-child/child", {
          params: {childId: row.childId}
        });
        this.tableChildrenData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 点击添加L1
     */
    addParent() {
      //1->表示处于添加状态
      this.status = 1;
      this.form = {};
      this.idReadOnly = false;
      this.parentFormVisible = true;
    },
    addChild() {
      this.status = 3;
      this.childForm = {};
      this.idReadOnly = false;
      this.childFormVisible = true;
    },
    /**
     *
     * @param index
     * @param row
     */
    handleEditParent(index, row) {
      //0->表示处于编辑状体
      this.status = 0;
      this.idReadOnly = true;
      this.form = this.tableData[index];
      this.parentFormVisible = true;
    },
    /**
     * 点击表格某一行时 触发
     * @param val
     * @returns {Promise<void>}
     */
    async handleRowClick(val) {
      let parentId = val.id
      let r = await this.$axios.get('/graduate-require-child/child/findById', {
        params: {
          parentId: parentId
        }
      });
      console.log(r['data']);
      this.tableChildrenData = r['data'];
    },
    async handleEditParentContent() {
      let res;
      try {
        res = await this.$axios.put("/graduate-require-parent/parent",
            this.form
        );
      } catch (e) {
        console.log(e)
      }
      this.$message({
        type: 'success',
        message: '修改成功!'
      });
      this.parentFormVisible = false
      console.log(res)
    },
    async handleAddParentContent() {
      let res;
      try {
        res = await this.$axios.post("/graduate-require-parent/parent", this.form);
      } catch (e) {
        console.log(e)
      }
      this.parentFormVisible = false
      this.$message({
        type: 'success',
        message: '添加成功!'
      });
      this.tableData.push(this.form)
    },
    async handleAddChildContent() {
      let res;
      try {
        res = await this.$axios.post("/graduate-require-child/child", this.childForm);
      } catch (e) {
        console.log(e)
      }
      this.childFormVisible = false
      this.$message({
        type: 'success',
        message: '添加成功!'
      });
    },
    async handleEditChildContent() {
      console.log(JSON.stringify(this.childForm));
      let res;
      try {
        res = await this.$axios.put("/graduate-require-child/child",
            this.childForm
        );
      } catch (e) {
        console.log(e)
      }
      this.$message({
        type: 'success',
        message: '修改成功!'
      });
      this.childFormVisible = false
    },
    handleConfirm() {
      switch (this.status) {
        case 0:
          this.handleEditParentContent();
          break;
        case 1:
          this.handleAddParentContent();
          break;
        case 2:
          this.handleEditChildContent();
          break;
        case 3:
          this.handleAddChildContent();
          break;
      }
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 90%;
}

/*选中行设置样式*/
.el-table__body tr.current-row > td {
  background-color: brown !important;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center
}
</style>
